<template>
  <div class="tenement_fourth">
    <Header title="车辆信息管理" @del="del" @add="add" />
    <Add v-show="bh" @click="flag"></Add>
    <div class="main">
      <div class="kuang">
        <el-form label-width="120px" style="margin-top: 20px;">
          <el-form-item label="车牌号码：">
            <el-input label="车牌号码：" placeholder="请输入车牌号码" v-model="carhaoma" />
          </el-form-item>
        </el-form>
        <el-form-item label="联系方式:" style="margin-top: 20px;">
          <el-input placeholder="请输入联系方式" disabled="true" />
        </el-form-item>
        <div>车辆类型：
          <el-select placeholder="请选择" disabled="true">
            <el-option label="临时车" value="" />
            <el-option label="包月车" value="" />
            <el-option label="园区车" value="" />
          </el-select>
        </div>
        <div style="margin-left: 135px;">
          <el-button type="success" @click="chaxun">查询</el-button>
          <el-button type="info" plain @click="chongzhi">重置</el-button>
        </div>
      </div>
      <div class="tableBox">
        <Table :data="tableData" @check="check" @check-all="checkAll" :keys="[
          'check',
          'vehicleBrand',
          'driverId',
          'vehicleNum',
          'vehicleModel',
          'vehicleType',
          'beginTime',
          'endTime',
        ]" :label="[
  '值',
  '车主姓名',
  '联系方式',
  '车牌号码',
  '车辆型号',
  '车辆类型',
  '开始时间',
  '结束时间',
]">
          <template #status> 正常 </template>
          <template #btn><button @click="shanchu" style="margin: 0 35%; ">删除</button>
          </template>
        </Table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import Table from "@/components/common/MyTable.vue";
import Header from "@/components/common/MyHeader.vue";
import service from "@/api/index";
import Add from '@/components/ml/Add.vue'
var tableData: any = ref([]);
var bh: any = ref(false)
var carhaoma: any = ref()
var delid: any = ref()
var plid: any = ref([])
var str: any = ref('')
var arr: any = ref([])
var add = () => {
  bh.value = !bh.value
}
var flag = (e) => {
  if (e.target.className == 'el-button el-button--primary cha' || e.target.className == 'el-button el-button--primary') {
    bh.value = !bh.value
  }
}
//单选
var check = (select: any, row: any) => {
  delid.value = row.vehicleId
  console.log(delid.value);

}
//多选
var checkAll = (select: any) => {
  select.forEach((item: any) => {
    plid.value.push(item.vehicleId)
  })

  for (var i = 0; i <= plid.value.length - 1; i++) {
    arr.value.push(plid.value[i])
  }
  str = arr.value.join(',')


}
//单删
var shanchu = async () => {
  var res = await service.car.del({ id: delid.value })
  tableData.value = tableData.value.filter(item => item.vehicleId != delid.value)
}
//多删
var del = async () => {
  var res = await service.car.pldel({ ids: str })
  var res1 = await service.car.carlist()
  tableData.value = res1.data.data
}

//查询
var chaxun = async () => {
  tableData.value = tableData.value.filter(item => item.vehicleNum == carhaoma.value)
}
var chongzhi = async () => {
  var res = await service.car.carlist()
  console.log(21111);

  tableData.value = res.data.data
}
onMounted(async () => {
  var res = await service.car.carlist()
  tableData.value = res.data.data
})
</script>
<style scoped lang="scss">
.tenement_fourth {
  padding: 10px;
  height: 100%;
  background: gainsboro;
}

.main {
  background-color: white;
  height: 760px;
  padding: 15px;
}

.main .kuang {
  width: 98%;
  height: 60px;
  border: 1px solid black;
  border-radius: 5px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.get {
  background-color: white;
  padding: 15px;
}

.get div {
  border-bottom: 1px solid black;
  width: 99%;
  margin: auto;
}

.get span {
  display: inline-block;
  width: 95px;
  height: 40px;
  line-height: 40px;
}

.tableBox {
  flex: 1;
  margin-top: 25px;

  .table {
    text-align: left;

    :deep(td),
    :deep(th) {
      font-weight: 400;
      border: 1px solid #eee;
      padding-left: 10px;
    }
  }
}
</style>
